<template>
    <view class="card-template mt-[var(--top-m)]" v-if="items.list && items.list.length>0">
        <view class="flex justify-between items-center" @click="toLink">
            <view class="text-[30rpx]">
                <text>种草秀</text>
                <text class="ml-[6rpx] text-[24rpx] text-[var(--text-color-light9)]" v-if="items.count">
                    ({{ items.count }})
                </text>
            </view>
            <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
        </view>

        <view class="grid grid-cols-3 gap-2 mt-[20rpx]">
            <view class="w-[210rpx] h-[210rpx]" v-for="(item, index) in items.list" :key="index" @click="handleClick(item)">
                <image :src="img(item.content_cover)" mode="aspectFill" class="w-[210rpx] h-[210rpx] rounded-[20rpx]" />
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { img, redirect } from '@/utils/common';

const props = defineProps({
    items: {
        type: Object,
        required: true,
        default: () => ({}),
    }
});

const treasureId = ref<string | null>(null);

function extractTreasureId(url: string) {
    const match = url.match(/treasure_id=(\d+)/);
    return match ? match[1] : null;
}

onMounted(() => {
    if (props.items && props.items.url) {
        treasureId.value = extractTreasureId(props.items.url);
    }
});

const toLink = () => {
    redirect({ url: '/addon/sow_community/pages/sow_show', param: { treasure_id: treasureId.value } })
}

const handleClick = (item: any) => {
    if (item.content_type == 1) {
        redirect({ url: '/addon/sow_community/pages/image/detail', param: { content_id: item.content_id } })
    } else {
        redirect({ url: '/addon/sow_community/pages/video/detail', param: { content_id: item.content_id } })
    }
}
</script>

<style lang="scss" scoped>

</style>
